<template>
  <el-row style="background-color:skyblue;">
    <el-col :span="6" :xs="24" style="background:salmon;">
        <el-row>
          <el-col :span="24" :xs="24">
              <strong>闲事随心管理后台</strong>
              <el-divider></el-divider>
          </el-col>
          <el-col :span="24" :xs="24">
              <el-row>
                <el-col :span="24"  :xs="24">
                    <span><i class="el-icon-s-home">首页</i></span>
                </el-col>
              </el-row>
          </el-col>
          <el-col :span="24" :xs="24" >
              <el-collapse name="a" style="background:salmon;">
                <el-collapse-item name="a" title="用户账号管理">
                    <p style="background:skyblue;">
                        <router-link to="/center/"><i class="el-icon-user"></i> 账号</router-link>
                    </p>
                    <p style="background:skyblue;">
                        <el-link> <i class="el-icon-document"></i> 个人信息</el-link>
                    </p>
                </el-collapse-item>
                 <el-collapse-item name="b" title="手机账号管理">
                    <p style="background:skyblue;">
                        <router-link to="/center/phone"><i class="el-icon-user"></i>手机号</router-link>
                    </p>
                    <p style="background:skyblue;">
                        <el-link> <i class="el-icon-document"></i> 个人信息</el-link>
                    </p>
                </el-collapse-item>
                 <el-collapse-item name="c" title="商品管理">
                    <p style="background:skyblue;">
                        <router-link to="/center/shopa"><i class="el-icon-user"></i>商品信息</router-link>
                    </p>
                    <p style="background:skyblue;">
                        <el-link> <i class="el-icon-document"></i>商品存货</el-link>
                    </p>
                     <p style="background:skyblue;">
                        <el-link> <i class="el-icon-document"></i>商品出售日志</el-link>
                    </p>
                     <p style="background:skyblue;">
                        <el-link> <i class="el-icon-document"></i>商品进货</el-link>
                    </p>
                </el-collapse-item>
                 <el-collapse-item name="d" title="图书管理">
                    <p style="background:skyblue;">
                       <router-link to="/center/booka"><i class="el-icon-user"></i>图书信息</router-link>
                    </p>
                    <p style="background:skyblue;">
                        <el-link> <i class="el-icon-document"></i>图书数量</el-link>
                    </p>
                     <p style="background:skyblue;">
                        <el-link> <i class="el-icon-document"></i>图书存货</el-link>
                    </p>
                     <p style="background:skyblue;">
                        <el-link> <i class="el-icon-document"></i>图书更新</el-link>
                    </p>
                </el-collapse-item>
                 <el-collapse-item name="e" title="电影管理">
                    <p style="background:skyblue;">
                       <router-link to="/center/video"><i class="el-icon-user"></i>电影信息</router-link>
                    </p>
                    <p style="background:skyblue;">
                        <el-link> <i class="el-icon-document"></i>上传记录</el-link>
                    </p>
                </el-collapse-item>
                 <el-collapse-item name="f" title="修改密码">
                    <p style="background:skyblue;">
                        <router-link to="/center/pass"><i class="el-icon-user"></i>进入界面</router-link>
                    </p>
                    
                </el-collapse-item>
              </el-collapse>
          </el-col>
        </el-row>
    </el-col>
    <el-col :span="18" :xs="24">
          <el-row>

    <el-row>
     <el-col :span="24" :xs="24" style="border-bottom:1px solid black;">
      <strong>用户列表</strong>
      
    </el-col>
    </el-row>

   <el-row>

     <el-col id="a" :span="24" :xs="24" style="box-sizing:border-box;height:60px;padding-top:5px;margin-top:10px;">
     <el-menu :default-active="id" class="el-menu-demo" mode="horizontal" 
     background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
  @select="sel"
     >
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2.4">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-5">选项1</el-menu-item>
    <el-menu-item index="2-6">选项2</el-menu-item>
    <el-menu-item index="2-7">选项3</el-menu-item>
   
  </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
</el-menu>
    
     </el-col>

   </el-row>
   <el-row>
     <el-col :span="24" :xs="24">
          <el-row>
      <el-col :span="24" :xs="24">
          <el-table
          :data="table"
          border
          >
              <el-table-column
              label="账号"
              prop="id"
              width="100%"
              >

              </el-table-column>

              <el-table-column
               label="密码"
              prop="name"
              width="100%"
              >

              </el-table-column>

              <el-table-column
              label="时间"
              prop="mibao"
              width="100%"
              >

              </el-table-column>
               <el-table-column
     
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
          </el-table>
      </el-col>
      <el-col :span="24" :xs="24">
        <el-pagination :total="total" :current-page="start" :page-size="page" @current-change="sel" layout="total,prev,pager,next"></el-pagination>    
      {{this.$store.state.page}}
  
      {{this.$store.state.index}}
      </el-col>
    </el-row>
     </el-col>
   </el-row>
  </el-row>
    </el-col>
    <!-- <el-upload
  class="upload-demo"
  drag
  action="http://localhost/tp5/publica/index/api/upload"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> -->

<ul>
  <li v-for="a in list" :key="a.id">
        {{a.user}}{{a.text}}
  <el-popconfirm
  confirmButtonText='好的'
  cancelButtonText='不用了'
  icon="el-icon-info"
  iconColor="red"
  title="这是一段内容确定删除吗？"
  @onConfirm="del(a.id)"
  @onCancel="cel"
  >
  <el-button slot="reference">删除</el-button>
</el-popconfirm>
  </li>
</ul>
    <input type="file" name="file" ref="file">
    <button @click="file">上传</button>
    <!-- <button @click=""></button> -->
    <div id="can" style="width:500px;height:500px;">

    </div>
  </el-row>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import {http} from '../http/index'
axios.defaults.baseURL="http://localhost:8000/tp5/"
//axios.defaults.baseURL="/tp5/"
import echarts from 'echarts'
export default {
     mounted(){
      const h=this.$http();
      h.then((res)=>{
        console.log(res)
      })
        const ech=echarts.init(document.getElementById('can'),"dark");
        ech.setOption({
          title:{
            text:"hello"
          },
  legend: { data: ['招商银行', '浦发银行']},
  xAxis: {
	  type: 'category',  
	    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],   
	    name: '日期',   
	    
	    nameTextStyle: {
	      fontWeight: 600,
	      fontSize: 18
	    }
  },
  yAxis: {type: 'value',
  name: '纵轴名称',  
  nameTextStyle: {
    fontWeight: 600,
    fontSize: 18
  }},
  label: {text:"nihao"},
  tooltip: {trigger: 'axis'},// axis   item   none三个值
  series: [{
    name: '招商银行',
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  },
  {
    name: '浦发银行',
    data: [620, 711, 823, 934, 1445, 1456, 1178],
    type: 'line'
  }]
})
     },
     data(){
        return{
          id:"1",
          list:[{
            id:1,
            user:"流通",
            text:"世界真好"
          },
          {
            id:2,
            user:"撒网",
            text:"世界真好"
          }
          ],
            total:150,
            start:0,
            page:3,
            d:"",
            tablea:[{id:"",name:"",mibao:""}]
        }
    },
    methods:{
      file:function(){
        const form=new FormData();
        const file=this.$refs.file.files[0];
        form.append("file",file);
        const text={
          file:form
        }
        const header={
          headers:{
            "Content-Type":"multipart/form-data"
          }
        }
        axios.post("publica/index/api/upload",form,header).then(res=>{console.log(res.data)}).catch(function(err){
          console.log(err)
        })
      
        
      },
      sel(value){
       this.$store.state.index=value;
        this.$store.dispatch("page")
      
      },
      // sel:function(q){
      //   console.log(q)
      // },
      del:function(id){
        let i=-1;
        let index=null;
          for (let s of this.list) {
            i=i+1;
            if(s.id==id){
              console.log(s)
                this.list.splice(i,1);
                this.$message({
                  message:"删除成功",
                  type:"info"
                })
            }
          }   
       
      },
      cel:function(){
        this.$confirm("是否取消","提示",{
          confirmButton:"确定",
          cancelButton:"取消",
          type:"warning"
        }).then(()=>{
          this.$message({
            message:"取消成功",
            type:"success"
          })
        }).catch(()=>{
           this.$message({
            message:"失败",
            type:"success"
          })
        })
      }
    },
  created(){
    window.onload=function(){
      var a=document.getElementById("a");
      console.log(a.clientHeight)
    }
   this.$store.dispatch("page")
  },
  computed:{
    table:{
      get:function(){
        return this.$store.state.page
      }
    }
  }
}
</script>